<template>
  <div >

    <div class="userinfo">



      <!--<div class="userinfo-nickname">-->
        <!--<card :text="userInfo.nickName"></card>-->
      <!--</div>-->



      <!--<img v-if="isShow" class="userinfo-avatar"  :src="userInfo.avatarUrl" background-size="cover" />-->
      <!--<Button v-else open-type="getUserInfo" @getuserinfo="getUserInfo">点击获取用户信息</Button>-->
      <!--<button open-type="getUserInfo">获取授权</button>-->

      <van-cell-group>
        <van-field
          label="用户名"
          placeholder="请输入用户名"
          :value="username"
          @change = "changeUsername"

        />

        <van-field
          placeholder="请输入密码"
          label="密码"
          @change = "changepassword"

          v-model="password"


          type="password"
        />
      </van-cell-group>

      <van-button @click="loginGo">登录</van-button>

    </div>



    <div class="usermotto">
      <div class="user-motto">
        <card :text="motto"></card>
      </div>
    </div>

    <form class="form-container">
      <input type="text" class="form-control" :value="motto" placeholder="v-model" />
      <input type="text" class="form-control" v-model="motto" placeholder="v-model" />
      <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
    </form>

    <a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>

    <div class="all">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      username:"",
      password:"",
      isShow:false,
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue13331',
        avatarUrl: 'https://www.baidu.com/img/baidu_jgylogo3.gif'
      }
    }
  },
  beforeMount(){
    wx.getUserInfo({
      success:(data)=>{
        console.log(data)
      }
    })



    },

  // mounted(){
  //   // env是你云开发的环境id。
  //   const db = wx.cloud.database({ env: 'ww-tveol' })
  //   this.db.collection('article').get()
  //     .then(res=>{
  //       console.log(res.data)
  //       // 可以进行数据初始化
  //     })
  //     .cathc(console.error)
  // },
  components: {
    card
  },
  // mounted{
  //
  // },
  mounted() {




    wx.cloud.callFunction({ name: 'login' }).then(res => {
      console.log(res)
    })

  },
  methods: {



    changeUsername(data){
      this.username = data.mp.detail
    },
    changepassword(data){
      this.password = data.mp.detail
    },
    loginGo(){
      let userflag =false
      console.log(222)
      console.log(this.password)
      console.log(this.username)
      let t = this
      // env是你云开发的环境id。
      const db = wx.cloud.database({env: 'ww-tveol'})
      db.collection('user').get({
        success(res) {
          let users = res.data;
          for (let i=0; i<users.length; i++){
            if (t.username === users[i].username){
              userflag = true;
              if (t.password == users[i].password) {  //判断密码是否正确
                console.log("登录成功")
              }else{
                console.log("密码错误")
              }
              break
            }
          }
          if(!userflag){
            console.log("用户不存在")
          }

        }
      })


    },
    getUserInfo(data){
      if(data.mp.detail.rawData){
        wx.getUserInfo({
          success:(data)=>{
            console.log(data)
            this.userInfo = data.userInfo
            this.isShow = true
          }
        })
      }
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      console.log('clickHandle:', ev)
      // throw {message: 'custom test'}
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}
.all{
  width:7.5rem;
  height:1rem;
  background-color:blue;
}
.all:after{
  display:block;
  content:'';
  clear:both;
}
.left{
  float:left;
  width:3rem;
  height:1rem;
  background-color:red;
}

.right{
  float:left;
  width:4.5rem;
  height:1rem;
  background-color:green;
}
</style>
